<template>
  <!-- 自定义指令对子组件的class类进行逻辑渲染 -->
  <div
    class="tab-nav"
    v-tab-current="{
      curIdx,
      className: 'nav-item',
      currentClassName: 'nav-current',
    }"
  >
    <!-- 给子组件传每项item和index -->
    <item
      v-for="(item, index) of navData"
      :key="index"
      :index="index"
      :item="item"
      @changeTabIndex="changeTabIndex"
    ></item>
  </div>
</template>

<script>
import Item from "./Item.vue";
// import { mapState } from "vuex";
import tabCurrent from "../directives/tabCurrent";

export default {
  name: "TabNav",
  components: {
    Item,
  },
  props: {
    navData: Array,
    curIdx: Number,
  },
  computed: {
    // ...mapState(["tabIndex"]),
  },
  directives: {
    //注册指令
    tabCurrent,
  },
  methods: {
    changeTabIndex(index) {
      this.$emit("changeTabIndex", index);
    },
  },
};
</script>

<style lang="scss" scoped>
.tab-nav {
  height: 50px;
  border-bottom: 1px solid #000;
}
</style>